   <template>
	<div>

		<el-table :data="tableData.records">
			<el-table-column label="用户名" prop="username"></el-table-column>
			<el-table-column label="昵称" prop="nickname"></el-table-column>

			<el-table-column show-overflow-tooltip label="电子邮箱" prop="email"></el-table-column>
			<el-table-column label="手机号码" prop="phone"></el-table-column>
			<el-table-column label="角色" prop="role">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.role === '[2]'">会员</el-tag>
					<el-tag type="success" v-else>会员</el-tag>
				</template>
			</el-table-column>
			
			<el-table-column label="状态" >
				<template #default = "scope">
					<el-tag type="success" v-if="scope.row.status ">启用</el-tag>
					<el-tag type="danger" v-else >禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="250px">
				<template #default = "scope">
					<template v-if="scope.row.status" >
						<el-button type="danger" plain size="small" @click="del(scope.row.id,0)">冻结</el-button>
					</template>
					<el-button v-else type="warning" plain size="small" @click="del(scope.row.id,1)">启用</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 10px;" background 
		v-model:current-page = "params.PageNo" :page-count = "tableData.pages" :total="tableData.total"
		@current-change = "getTableData"/>
	</div>	
</template>

<script setup>
import { Avatar } from '@element-plus/icons-vue'
import { _axios } from '@/plugins/axios'
import { ref,reactive } from 'vue'
import { get, post } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import url from './util'

const dialog = reactive({
	show: false,
	title: '',
	id: null
})
const tableData = reactive({
	records: [],
	pages: 0,
	total: 0
})
const params = reactive({
	PageNo: 1,
	PageSize: 15,
})

function del(id,status) {
	const text = status ? '确定要启用该用户吗' : '确定要禁用该用户吗';
	ElMessageBox.confirm(text,'警告',{
		 type: 'warning'
	}).then(() => {
		post(url.del,{id,status}, content => {
			getTableData()
			console.dir("AAAAAAAAAAAAAAAAAAAA")
		})
	}).catch(() => {})
}

function getTableData(){
	get(url.list,params,content => {
		tableData.records = content.records
		tableData.pages = content.pages
		tableData.total = content.total 
		console.dir(content)
	})
}
getTableData()
</script>

<style>
</style>